<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单输入绑定</title>
	</head>
	<body>
		<div id="app">
			<h1>一：基本用法</h1>
			<p>1：文本</p>
			<input v-model="message" placeholder="edit me">
			<p>Message is: {{message}}</p>

			<p>2：多行文本</p>
			<span>Multiline message is:</span>
			<p style="white-space: pre-line;">{{msg2}}</p>
			<textarea v-model="msg2"></textarea>

			<p>3：复选框</p>
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{checked}}</label>
			<br>
			<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
			<label for="jack">jack</label>
			<input type="checkbox" id="john" value="john" v-model="checkedNames">
			<label for="john">john</label>
			<input type="checkbox" id="mike" value="mike" v-model="checkedNames">
			<label for="mike">mike</label>
			<br>
			<span>checked names: {{checkedNames}}</span>
			<br>

			<p>4：单选按钮</p>
			<input type="radio" value="one" id="one" v-model="picked">
			<label for="one">one</label>
			<input type="radio" value="two" id="two" v-model="picked">
			<label for="two">two</label>
			<span>picked：{{picked}}</span>
			<br>

			<p>5：选择框</p>
			<select v-model="selected" multiple style="width: 80px;">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span>Selected: {{selected}}</span>
			<br>
			<select v-model="selected2">
				<option v-for="option in options" v-bind:value="option.value">
					{{option.text}}
				</option>
			</select>
			<span>Selected: {{selected2}}</span>
			<br>



			<h1>二：值绑定</h1>
			<p>1：复选框</p>
			
			<p>2：单选按钮</p>
			<p>3：选择框的选项</p>

			<h1>三：修饰符</h1>
			<p>1：lazy</p>
			<p>2：number</p>
			<p>3：trim</p>

			<h1>四：在组件上使用v-model</h1>
		</div>



	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				selected2: 'A',
				options: [{
						text: 'One',
						value: 'A'
					},
					{
						text: 'Two',
						value: 'B'
					},
					{
						text: 'Three',
						value: 'C'
					},
				],
				selected: [],
				picked: '',
				checkedNames: [],
				checked: false,
				message: '',
				msg2: '',
			}
		})
	</script>
</html>